<template>
  <div>
    <!-- xixix:{{ screenWidth }} -->
    <el-col :span="14">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>销量统计</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <el-col :span="5">
      <el-col :span="14">
        <el-date-picker
          v-model="buyDate_year"
          type="year"
          placeholder="购车年份"
          @change="buyYear()"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-col :span="12">
        {{ this.this_Year_date }}年总销量： {{ this.allnum }}</el-col
      >
    </el-col>
    <el-col :span="5">
      <el-col :span="14">
        <el-date-picker
          v-model="buyDate"
          type="month"
          placeholder="购车年月"
          @change="buyYm()"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-col :span="12">
        {{ this.this_Year }}年{{ this.this_Month }}月销量：{{ this.MonthNum }}
      </el-col>
    </el-col>
    <!-- 新车信息 -->
    <template>
      <el-table
        :data="curtableData"
        style="width: 100%"
        v-loading="loading"
        stripe
      >
        <el-table-column
          prop="username"
          label="姓名"
          width="120"
          fixed
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="call" label="联系电话" width="140">
        </el-table-column>
        <el-table-column label="购车日期" width="140">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="MotoType" label="车辆型号" width="140">
        </el-table-column>
        <el-table-column prop="brand" label="车牌号" width="140">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="260px">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/userinfo/details',
                query: {
                  uid: scope.row._id,
                },
              }"
            >
              <el-button
                size="mini"
                type="primary"
                @click="details(scope.$index, scope.row)"
                >更多/编辑</el-button
              >
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          :page-size="pageSize"
          :current-page="curPage"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
      <!-- 分页 -->
    </template>
  </div>
</template>

<script>
import unit from "../../../unit/unit.js";
import moment from "moment";
export default {
  name: "newMoto",
  data() {
    return {
      tableData: [],
      tmptable: [],
      curPage: 1,
      pageSize: 15,
      loading: true,
      allnum: 0, //年总销量
      MonthNum: 0, //月销量
      buyDate: null,
      buyDate_year: null,
      this_Year: "",
      this_Month: "",
      this_Year_date: "",
    };
  },
  created() {
    // 清空
    unit.setCookie("mouth", "");
    unit.setCookie("pages", "");
    unit.setCookie("selectdate", "");
    let id = "LXuao";
    this.$axios({
      method: "POST",
      url: "/api/getAlluser",
      data: {
        id: id,
        LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
      },
    }).then((res) => {
      this.this_Year = moment().format("YYYY");
      this.this_Year_date = this.this_Year;
      this.this_Month = moment().format("MM");
      this.tmptable = res.data.data;
      this.tmptable.forEach((e, i) => {
        if (e.newMoto == "true" || e.newMoto == true) {
          if (e.date1.slice(0, 4) == this.this_Year) {
            if (e.date1.slice(5, 7).replace("/", "") == this.this_Month) {
              this.MonthNum += 1;
            }
            e.date1 = e.date1.replace(/\//g, "-");
            this.tableData.push(e);
            this.allnum = this.tableData.length;
          }
        }
      });

      setTimeout(() => {
        this.loading = false;
      }, 500);
    });
  },
  computed: {
    total(i, row) {
      return this.tableData.length;
    },
    curtableData() {
      const curPage = this.curPage;
      const pageSize = this.pageSize;
      return this.tableData.slice((curPage - 1) * pageSize, pageSize * curPage);
    },
  },
  methods: {
    currentChange(val) {
      this.curPage = val;
    },
    buyYear() {
      this.buyDate = null;
      if (this.buyDate_year) {
        this.this_Year_date = this.buyDate_year.getFullYear();
        this.tableData = [];
        this.tmptable.forEach((e, i) => {
          if ((e.newMoto || e.newMoto == "true") && e.date1 != "") {
            if (
              Number(e.date1.slice(0, 4)) == this.buyDate_year.getFullYear()
            ) {
              e.date1 = e.date1.replace(/\//g, "-");
              this.tableData.push(e);
              this.allnum = this.tableData.length;
            }
          } else {
            this.allnum = this.tableData.length;
          }
        });
      } else {
        this.tableData = [];
        this.this_Year = moment().format("YYYY");
        this.this_Year_date = this.this_Year;
        this.this_Month = moment().format("MM");
        this.MonthNum = 0;
        this.allnum = 0;
        this.tmptable.forEach((e, i) => {
          if (e.newMoto == "true" || e.newMoto == true) {
            if (e.date1.slice(0, 4) == this.this_Year) {
              if (e.date1.slice(5, 7).replace("/", "") == this.this_Month) {
                this.MonthNum += 1;
              }
              e.date1 = e.date1.replace(/\//g, "-");
              this.tableData.push(e);
              this.allnum = this.tableData.length;
            }
          }
        });
      }
    },
    buyYm() {
      this.buyDate_year = null;
      if (this.buyDate) {
        this.tableData = [];
        this.tableData.length <= 0 ? (this.MonthNum = 0) : this.MonthNum;
        let fullYear = this.buyDate.getFullYear();
        let Month = this.buyDate.getMonth() + 1;
        this.this_Year = fullYear;
        this.this_Month = Month;
        let tempTime = fullYear + "-" + Month;
        this.tmptable.forEach((e, i) => {
          if ((e.newMoto || e.newMoto == "true") && e.date1 != "") {
            if (e.date1.slice(5, 7).replace("/", "") == this.this_Month) {
              e.date1 = e.date1.replace(/\//g, "-");
              this.tableData.push(e);
              this.MonthNum = this.tableData.length;
              //判断年份
            }
          }
        });
      } else {
        this.tableData = [];
        this.this_Year = moment().format("YYYY");
        this.this_Year_date = this.this_Year;
        this.this_Month = moment().format("MM");
        this.MonthNum = 0;
        this.allnum = 0;
        this.tmptable.forEach((e, i) => {
          if (e.newMoto == "true" || e.newMoto == true) {
            if (e.date1.slice(0, 4) == this.this_Year) {
              if (e.date1.slice(5, 7).replace("/", "") == this.this_Month) {
                this.MonthNum += 1;
              }
              e.date1 = e.date1.replace(/\//g, "-");
              this.tableData.push(e);
              this.allnum = this.tableData.length;
            }
          }
        });
      }
    },
    details(i, row) {
      
    },
    handleRemove(file, fileList) {},
  },
};
</script>

<style scoped>
.el-popper[x-placement^="bottom"] {
  margin-top: -39px;
  left: 800px !important;
}
</style>